<template>
  <div class="echart">
    <div ref="echartBox" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps, withDefaults, watchEffect } from "vue";
import { EChartsOption } from "echarts";
import useEcharts from "@/components/echart/hooks/useEcharts";

interface IProps {
  option: EChartsOption;
  width?: string;
  height?: string;
}
const props = withDefaults(defineProps<IProps>(), {
  width: "100%",
  height: "360px"
});

const echartBox = ref<HTMLDivElement>();
onMounted(() => {
  const { setOption } = useEcharts(echartBox.value!);
  watchEffect(() => {
    setOption(props.option);
  });
});
</script>

<style scoped></style>
